<template>
  <div class="layout">
    <el-container>
      <el-aside class="left-aside">
        <div>
          <div>
            <el-button
              class="button"
              color="#7fc65a"
              plain
              @click="createHtml()"
            >
              <el-icon :class="['iconfont', 'icon-fabu']"></el-icon>
              <span v-if="!isCollapse">发布</span>
            </el-button>
          </div>
          <div>
            <el-button class="button" color="#409eff" plain @click="collapse">
              {{ collapseContent }}</el-button
            >
          </div>
        </div>

        <div class="left-menu">
          <el-scrollbar height="100%">
            <el-menu
              router
              :default-active="$route.path"
              class="menu"
              :collapse="isCollapse"
            >
              <template v-for="(item, index) in menuList" :key="index">
                <el-sub-menu
                  v-if="item.children && item.children.length > 0"
                  :index="index.toString()"
                >
                  <template #title>
                    <el-icon :class="['iconfont', item.icon]"></el-icon>
                    <span>{{ item.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="(child, childIndex) in item.children"
                    :key="childIndex"
                    :index="child.path"
                    @click="handleClick(child.path)"
                  >
                    {{ child.title }}
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item
                  v-else
                  :index="item.path"
                  @click="handleClick(item.path)"
                >
                  <el-icon :class="['iconfont', item.icon]"></el-icon>
                  <template #title>{{ item.title }}</template>
                </el-menu-item>
              </template>
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container class="container">
        <el-header class="header">
          <div class="logo">
            <span class="logo-icon">
              <img alt="logo" src="../assets/logo.svg" />
            </span>
            <span class="logo-text">
              Blog
            </span>

        </div>
          <div class="user-info">
            <span>欢迎回来,</span>
            <el-dropdown>
              <span class="nick-name">
                {{ userInfo.nickName }}
                <el-icon :class="['iconfont', 'icon-open']"></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="goUserInfo"
                    >个人信息</el-dropdown-item
                  >
                  <el-dropdown-item divided @click="logOut"
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <div class="avatar">
              <img :src="userInfo.avatar" />
            </div>
          </div>
        </el-header>
        <el-main class="right-main">
          <router-view />
        </el-main>
      </el-container>
    </el-container>

    <!-- 加载进度条 -->
    <Dialog
      :show="progressDialog.show"
      :title="progressDialog.title"
      :buttons="progressDialog.buttons"
      @close="progressDialog.show = false"
      :show-close="false"
      :showCancel="false"
      width="400px"
    >
      <div class="progress-container">
        <div class="progress-panel">
          <el-progress
            type="circle"
            :percentage="progressInfo.progress"
            :status="progressInfo.status"
            :color="colors"
          />
        </div>
        <div class="error" v-if="progressInfo.result == 0">
          <div>生成界面出错,{{ progressInfo.errorMsg }}</div>
        </div>
        <div
          class="success"
          v-if="progressInfo.progress == 100 && progressInfo.result == 1"
        >
          <div>发布成功</div>
        </div>
        <div
          class="btn-panel"
          v-if="progressInfo.progress == 100 || progressInfo.result == 0"
        >
          <el-button
            class="button"
            color="#409eff"
            plain
            @click="progressDialog.show = false"
            >关闭</el-button
          >
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, watch } from "vue";
import VueCookies from "vue-cookies";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();

const api = {
  getUserInfo: "/getUserInfo",
  logOut: "/logout",
  createHtml: "/createHtml",
  checkProgress: "/checkProgress",
};

const menuList = ref([
  {
    title: "博客",
    icon: "icon-boke",
    open: true,
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
      },
      {
        title: "分类管理",
        path: "/blog/category",
      },
    ],
  },
  {
    title: "专题",
    icon: "icon-zhuanti",
    open: true,
    children: [
      {
        title: "专题管理",
        path: "/special/list",
      },
    ],
  },
  {
    title: "数据统计",
    icon: "icon-analysis",
    open: true,
    children: [
      {
        title: "流量分析",
        path: "/dataAnalysis/traffic",
      },
      {
        title: "文章数据",
        path: "/dataAnalysis/text",
      },
    ],
  },
  {
    title: "设置",
    icon: "icon-settings",
    open: true,
    children: [
      {
        title: "个人信息设置",
        path: "/setting/me",
      },
      {
        title: "博客成员",
        path: "/setting/users",
      },
      {
        title: "系统设置",
        path: "/setting/sysSetting",
        roleType: 1,
      },
    ],
  },
  {
    title: "回收站",
    icon: "icon-huishouzhan",
    open: true,
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
      },
    ],
  },
]);

const isCollapse = ref(false);
const collapseContent1 = "⨠";
const collapseContent2 = "收起导航栏";
const collapseContent = ref(collapseContent2);
const collapse = () => {
  isCollapse.value = !isCollapse.value;
  if (isCollapse.value) {
    collapseContent.value = collapseContent1;
  } else {
    collapseContent.value = "";
    for (let i = 0; i < collapseContent2.length; i++) {
      setTimeout(() => {
        collapseContent.value += collapseContent2[i];
      }, i * 50); // 每添加一个字符，延迟50毫秒
    }
  }
};

const userInfo = ref({});
const init = async () => {
  let result = await proxy.Request({
    url: api.getUserInfo,
  });
  if (!result) {
    return;
  }
  userInfo.value = result.data;
  userInfo.value.avatar =
    proxy.globalInfo.imageUrl + "/" + userInfo.value.avatar;
  // userInfo.value = VueCookies.get("userInfo");
  // userInfo.value.avatar = proxy.globalInfo.imageUrl + userInfo.avatar;
  console.log(userInfo.value);
};
init();

const handleClick = (path) => {
  // router.push(path);
  console.log(path);
};

const goUserInfo = () => {
  router.push("../setting/me");
};

const logOut = () => {
  proxy.Confirm(`你确定要退出吗?`, async () => {
    let result = await proxy.Request({
      url: api.logOut,
    });
    if (!result) {
      return;
    }
    router.push("/login");
  });
};

watch(
  () => store.state.userInfo,
  (newVal, oldVal) => {
    const avatar = proxy.globalInfo.imageUrl + newVal.avatar;
    const nickName = newVal.nickName;
    userInfo.value = { avatar, nickName };
  },
  { immediate: true, deep: true }
);

// 发布
const colors = [
  { color: "#7c0f0b", percentage: 20 },
  { color: "#692c07", percentage: 40 },
  { color: "#504309", percentage: 60 },
  { color: "#0c532a", percentage: 80 },
  { color: "#8dc149", percentage: 100 },
];

const progressDialog = reactive({
  title: "发布",
  buttons: [],
  show: false,
});
// 进度
const progressInfo = reactive({
  progress: 0,
});

let checkTimer = null;
const createHtml = async () => {
  progressDialog.show = true;
  progressInfo.progress = 0;
  progressInfo.status = undefined;
  let result = await proxy.Request({
    url: api.createHtml,
  });
  if (!result) {
    return;
  }
  checkProgress();
  checkTimer = setInterval(() => {
    checkProgress();
  }, 500);
};

const checkProgress = async () => {
  let result = await proxy.Request({
    url: api.checkProgress,
    showLoading: false,
  });
  if (!result) {
    return;
  }
  if (result.data.result == 0) {
    progressInfo.status = "exception";
    progressInfo.errorMsg = result.data.errorMsg;
  } else {
    progressInfo.progress = result.data.progress;
  }
  progressInfo.result = result.data.result;
  if (
    (result.data.progress == 100 || result.data.result == 0) &&
    checkTimer != null
  ) {
    clearInterval(checkTimer);
  }
};
</script>

<style scoped lang="scss">
.layout {
  height: 100vh;

  .left-aside {
    height: 100vh;
    width: auto;
    padding: 0px 10px;

    .left-menu {
      height: calc(100vh - 60px * 2);
    }

    .button {
      padding: 0;
      height: 60px;
      width: 100%;
      font-size: 1.2em;
      border-radius: 0;
      border: none;
      overflow: hidden;
    }

    .menu {
      border-right: 0;
    }

    .menu:not(.el-menu--collapse) {
      width: 200px;
    }
  }

  .container {
    height: 100vh;

    .header {
      background-color: #f4f4f4;
      border-bottom: 1px solid rgba(221, 221, 221, 0.421);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .logo{
        display: flex;
        align-items: end;
        .logo-icon {
          height: 50px;
          img {
            height: 50px;
          }
        }
  
        .logo-text {
          font-size: large;
          font-weight: bolder;
        }
      }

      .user-info {
        display: flex;
        align-items: center;
        font-size: large;

        .nick-name {
          color: rgb(45, 106, 169);
          font-size: large;
          cursor: pointer;
        }

        .nick-name:focus {
          outline: none;
        }

        .avatar {
          margin-left: 10px;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 25px;
          background: rgb(114, 114, 114);
          overflow: hidden;
          img {
            height: 100%;
          }
        }
      }
    }

    .right-main {
      position: relative;
      margin-top: 10px;
      background-color:#f4f4f4;
      padding: 20px 10px;
    }
  }
}

.progress-container {
  .progress-panel {
    display: flex;
    justify-content: center;
  }
  .error {
    color: red;
    margin-top: 20px;
    .info {
      font-size: 12px;
    }
  }
  .success {
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: green;
  }
  .btn-panel {
    text-align: center;
    margin-top: 20px;
    .button {
      margin: 0px auto;
    }
  }
}
</style>